<template>
  <li class="recommended-list">
    <div class="pic">
      <img
        :src="item.picUrl | imageView(246)"
        alt=""
      />
    </div>
    <span>
      <svg
        t="1635767343722"
        class="icon"
        viewBox="0 0 1026 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4626"
        width="200"
        height="200"
      >
        <path
          d="M627.828503 167.989142a191.923353 191.923353 0 0 0-229.613094 0 31.936128 31.936128 0 0 0 37.996328 51.343074 128.461924 128.461924 0 0 1 153.620439 0 31.936128 31.936128 0 0 0 37.996327-51.343074zM513.021956 2.043912C231.268663 2.043912 2.043912 231.268663 2.043912 513.021956v319.361278a31.92182 31.92182 0 0 0 31.925908 31.946347h63.892695v127.744511a31.925908 31.925908 0 0 0 63.851816 0v-63.892695h79.671697a48.123912 48.123912 0 0 0 48.072814-48.072814V529.168862a48.123912 48.123912 0 0 0-48.072814-48.072814H145.935329a48.123912 48.123912 0 0 0-48.072814 48.072814v15.779002H65.916168V513.021956c0-246.536687 200.569102-447.105788 447.105788-447.105788S960.127745 266.485269 960.127745 513.021956v31.925908h-31.946348v-15.779002a48.123912 48.123912 0 0 0-48.072814-48.072814h-95.450699a48.123912 48.123912 0 0 0-48.072814 48.072814v350.939721a48.123912 48.123912 0 0 0 48.072814 48.072814h79.671697v63.892695a31.925908 31.925908 0 0 0 63.851816 0v-127.744511h63.892695A31.92182 31.92182 0 0 0 1024 832.383234V513.021956C1024 231.268663 794.77525 2.043912 513.021956 2.043912zM161.714331 544.947864h63.892695v319.381717H161.714331V544.947864z m-63.851816 63.892695v191.596327H65.916168v-191.596327h31.946347z m702.574371 255.489022V544.947864h63.892695v319.381717h-63.892695z m159.690859-63.892695h-31.946348v-191.596327h31.946348v191.596327zM513.021956 544.947864a31.909557 31.909557 0 0 0-31.925908 31.946348v255.489022a31.925908 31.925908 0 1 0 63.851816 0v-255.489022A31.909557 31.909557 0 0 0 513.021956 544.947864z m127.744511 63.892695a31.88503 31.88503 0 0 0-31.925908 31.925908V768.510978a31.925908 31.925908 0 0 0 63.851816 0v-127.744511a31.88503 31.88503 0 0 0-31.925908-31.925908z m-255.489022 0a31.88503 31.88503 0 0 0-31.925908 31.925908V768.510978a31.925908 31.925908 0 0 0 63.851816 0v-127.744511a31.88503 31.88503 0 0 0-31.925908-31.925908z"
          p-id="4627"
          fill="#e6e6e6"
        ></path>
      </svg>
      {{ calculation }}万</span
    >
    <p>{{ item.name }}</p>
  </li>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  computed: {
    calculation: function () {
      return parseInt(this.item.playCount / 1000) / 10;
    },
  }
};
</script>

<style lang="less" scoped>
li {
  border-radius: 5px;
  background-color: rgb(241, 241, 241);
  width: 32.8%;
  list-style: none;
  box-sizing: border-box;
  position: relative;
  margin-top: 20px;

  .pic {
    width: 100%;
    height: auto;
    img {
      width: 100%;
      height: auto;
  border-radius: 5px;

    }
  }
  span {
    position: absolute;
    top: 0;
    right: 5px;

    color: rgb(255, 255, 255);
    font-size: 12px;
    svg {
      zoom: 0.05;
    }
  }
  p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    padding: 0 5px;
  }
}
</style>